<template>
  <div class="order-box">
    <div class="close-img-box">
      <image @click="close" class="close-img" src="/static/images/close.png" />
    </div>
    <div class="btn-box">
        <span class="button">
          木工机械数控设备体验中心
        </span>
    </div>
    <div class="btn-box">
        <span class="button">
          立即预约
        </span>
    </div>

    <div class="input-group">

      <input v-model="name" class="input" placeholder="请输入您的姓名" >
      <input v-model="phone" class="input" placeholder="请输入您的电话" >
      <textarea v-model="desc" class="input textarea" placeholder="备注" />
    </div>
    <div class="btn-box">
        <span class="button" @click="submit">
          立即提交
        </span>
    </div>

    <div class="desc">
      备注：预约成功后我们会及时和您联系，请您耐心等待，谢谢支持！
    </div>
  </div>
</template>

<script>
  const wxapp =getApp()
  export default {
    data(){
      return{
        name : '',
        phone : '',
        desc : ''
      }
    },
    methods:{
      close(){
        this.$emit('hide')
      },
      submit(){
        let data = {name : this.name,phone:this.phone,desc : this.desc};
        if(data.name=='')
        {
          wx.showToast({
            title: '姓名必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        if(data.phone=='')
        {
          wx.showToast({
            title: '电话必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        if(data.desc=='')
        {
          wx.showToast({
            title: '内容必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        wx.showLoading({
          title: '加载中',
        })
        data.title = data.name + '||' + data.phone + '||' + data.desc
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             service: 'App.Hong.FormData',
             table: '5_form_yuyue',
             data: data,
             stieid: 5
          },
          header: {
              'content-type': 'application/json' // 默认值
          },
          success: function(res) {
            wx.hideLoading()
            if(res.data.data.result >0 ) {
              wx.showToast({
                title: '报名成功.',
                icon: 'success',
                duration: 2000
              })
            }else {
              wx.showToast({
                title: '报名失败.',
                icon: 'success',
                duration: 2000
              })
            }
          }
        })
        console.log({name : this.name,phone:this.phone,desc : this.desc});

      }
    }
  }
</script>
<style scoped>

  .order-box{
    position: fixed;
    top: 167rpx;
    left: 25rpx;
    width: 700rpx;
    height: 687rpx;
    background: rgba(204,204,204,0.9);
    border: 1px solid #ccc;
  }

  .close-img-box .close-img{
    width:44rpx;
    height:44rpx;
    float: right;
    margin-top: 15rpx;
    margin-right: 15rpx;
  }

  .btn-box{
    display: flex;
    margin-top: 30rpx;
    justify-content: center;
  }
  .button{
    padding: 10rpx 40rpx;
    background: #2197D8;
    color: #fff;
    border-radius: 10rpx;
  }
  .input-group{
    padding: 0 20rpx;
    margin-top: 30rpx;
  }
  .input-group .input{
    background: #fff;
    line-height: 50rpx;
    font-size: 40rpx;
    height: 50rpx;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
    width:640rpx;

  }
  .input-group .textarea{
    height: 100rpx;
  }
  .desc{
    font-size: 25rpx;
    padding: 15rpx;
    color: #2197D8;
  }
</style>
